<template>
    <div class="title" @click="handleTitleClick" :class="{active: marginTop}">
        <i class="return-icon iconfont" v-show="returnShow">&#xe624;</i>
        <span class="text">{{title}}</span>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: ''
            },
            returnShow: {
                type: Boolean,
                default: false
            },
            marginTop: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            handleTitleClick () {
                if (!this.returnShow) {
                    return
                }
                this.$emit('clickHide')
            }
        }
    }
</script>

<style lang="stylus">
    @import '~common/stylus/mixins.styl'
    .title
        background: url('./title.png') no-repeat
        width: 100%
        height: 30px
        background-size: 100% 100%
        margin-top: 6px
        margin-bottom: 6px
        line-height: 30px
        font-size: 16px
        font-weight: 700
        color: #fff
        box-sizing: border-box
        font-size: 0
        padding-left: 15px
        &.active
            margin-top: 0
        .text
            font-size: 16px
            display: inline-block
            vertical-align: top
            width: 94%
            ellipsis()
        .return-icon
            display: inline-block
            font-size: 16px
            vertical-align: top
</style>